<template>
 <div class="upload-box">
   <div class="word">
     <van-cell-group inset>
       <van-field
           v-model="message"
           autosize
           type="textarea"
           maxlength="300"
           placeholder="详情"
           show-word-limit
       />
     </van-cell-group>
   </div>
   <div class="pic">
     <van-uploader
       :after-read="afterRead"
       v-model="fileList"
       multiple
       preview-size="150"
       capture="camera"
     />
   </div>
   <div class="btn">
     <van-button
       plain
       type="success"
       block
       style="width: 95%;margin: 20px auto"
       @submit="uploadLog"
     >
       上传日志
     </van-button>
   </div>
 </div>
</template>

<script setup>
import {ref} from "vue"
import {useRouter} from "vue-router"

// 路由
const router = useRouter()
// 文字绑定
const message = ref('')
//图片预览列表
const fileList = ref([
  { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },
  // Uploader 根据文件后缀来判断是否为图片文件
  // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
  { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg', isImage: true },
  { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg', isImage: true },
  { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg', isImage: true },
  { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg', isImage: true },
])


const afterRead = (file) => {
  // 此时可以自行将文件上传至服务器
  console.log(file);
};

// 上传日志
const uploadLog = () => {
  router.push('/upload')
}
</script>

<style scoped lang="less">
.upload-box{
  width: 95%;
  height: auto;
  margin: 50px auto 150px auto;
  padding: 50px 10px 10px 10px;
  box-sizing: border-box;
  box-shadow: 0 0 15px lightgray;
  border: 1px solid lightgray;
  border-radius: 15px;
  .word{}
  .pic{
    width:90% ;
    margin: 20px auto;
    padding-left: 15px;
    .van-uploader__wrapper {
      justify-content: center;
    }
  }
.van-field{
  min-height: 500px;
  .van-field__control{
    height: 85%;
  }
}
}
</style>